<!DOCTYPE html>
<html>
<head>
  <title>Hello World in Etro</title>
  <script src="../../dist/etro-iife.js"></script>
</head>
<body>
  <script>
    window.addEventListener('load', () => {
      const canvas = document.createElement('canvas')
      canvas.width = 600
      canvas.height = 400
      document.body.appendChild(canvas)

      new etro.Movie({ canvas })
      // create a red rectangle that starts at time 0 and lasts 4 seconds and fills the entire screen
        .addLayer(new etro.layer.Visual({
          startTime: 0,
          duration: 4,
          background: 'red'
        }))
      // create a transparent blue 500x200 at (50, 20) that starts at time 1 and lasts 2 seconds
        .addLayer(new etro.layer.Visual({
          startTime: 1,
          duration: 2,
          background: '#0000ff80',
          border: { color: '#00f', thickness: 4 },
          width: 500,
          height: 200,
          x: 50,
          y: 20
        }))
        .play()
    })
  </script>
</body>
</html>
